{extend name="public/base" /}
{block name="title"}案例分类{/block} {block name="main"}


<form class="layui-form">
    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;" class="layui-table">
        <thead>
            <tr>
                <th style="width: 40px;">ID</th>
                <th>分类名称</th>
                <th style="width: 80px;">排序</th>
                <th style="width: 80px;">状态</th>
            </tr>
        </thead>
        <tbody id="JS_box">
            {if condition="$data['msg']"}
                <tr class="td_center"><td colspan="10">{$data['msg']}</td></tr>
            {/if}
            {volist name="data" id="item"}            
            <tr class="nodelist depth01" data-id="{$item['id']}" data-depth="{$item['depth']}" data-name="{$item['tagname']}">
                <td class="td_left">
                    <div class="layui-table-cell ">{$item['id']}</div>
                </td>                
                <td class="td_left ">
                    <div class="layui-table-cell e-select-depth{$item['depth']}">
                        <i data-option='show' style="cursor: not-allowed; color: #eee;" class="layui-icon layui-icon-triangle-r"></i>
                        <span class="JS_edit">|-- {$item['groupname']}</span>
                    </div>
                    <input style="display: none;" value="{$item['groupname']}" class="layui-input layui-table-edit JS_edit_input" />
                </td>
                <td class="td_left">
                    <div class="layui-table-cell ">
                        <i data-option='left' class="layui-icon layui-icon-left"></i>
                        <i data-option='up' class="layui-icon layui-icon-up"></i>
                        <i data-option='down' class="layui-icon layui-icon-down"></i>                        
                        <i data-option='right' class="layui-icon layui-icon-right"></i>
                        <!--
                        <div class="layui-btn-group" style="display: none;">
                        <a href="javascript:;" class="layui-btn layui-btn-sm JS_down">左</a>
                        <a href="javascript:;"  {$key==0 ? 'style="display: none;"':''} class="layui-btn layui-btn-sm JS_up">上</a>
                        <a href="javascript:;" {$key+1 == count($data) ? 'style="display: none;"':''} class="layui-btn layui-btn-sm JS_down">下</a>                        
                        <a href="javascript:;" class="layui-btn layui-btn-sm JS_down">右</a>                        
                        </div>-->
                    </div>
                </td>
                <td class="td_left">
                    <div class="layui-table-cell layui-inline" style="height:auto;">
                        <input class="JS_status" lay-filter="status" type="checkbox" {$item[ 'status']==1? 'checked': ''} data-id="{$item['id']}" lay-skin="switch" lay-text="正常|关闭">
                    </div>
                </td>
            </tr>
            {/volist}
        </tbody>
    </table>
    <div style="text-align: right; padding-right: 20px; ">
        <a href="javascript:;" id="JS_close" class="layui-btn layui-btn-primary layui-btn-sm">关闭</a>
        <a href="javascript:;" id="JS_save" class="layui-btn layui-btn-sm">保存修改</a>        
        <a href="javascript:;" id="JS_addBtn" class="layui-btn layui-btn-normal layui-btn-sm">新增分类</a>
    </div>
</form>
<!--弹窗隐藏 START-->
<div id="JS_hidden_box" >
<div id="JS_alert_box" style="padding: 30px 60px; 60px 60px">
    <div class="layui-form-item">
    	<div class="layui-input-inline">
    		<input type="text" name="name" value="" placeholder="广告名称" lay-verify="required" class="layui-input" />
    	</div>    
    </div>
    <div class="layui-form-item">
    	<div class="layui-input-inline" id="JS_select" >                    
        </div>     
    </div>
    <div style="text-align: right; padding-right: 20px;">
        <a href="javascript:;" id="JS_add_close" class="layui-btn layui-btn-primary layui-btn-sm">取消</a> 
        <a href="javascript:;" id="JS_add_save" class="layui-btn layui-btn-sm">确定</a>        
    </div>
</div>
</div>
<!--弹窗隐藏 END -->
{/block}

{/block} {block name="script"}
<style>

.childrenBody{
    padding-top: 0px;
}
/*
.JS_edit{
    cursor:text;
}
.layui-table td{
    padding: 4px 0px;
}
.layui-layer-page .layui-layer-content{
    overflow: visible;
}
.layui-icon{
    cursor: pointer;
}
.JSe_block{
    display: inline-block;
    width: 16px;
}*/

.JS_edit{
    cursor:text;
}
.layui-table td{
    padding: 4px 0px;
}
.e-pointer{
    cursor: pointer;
}
.e_icon_block{
    display: inline-block;
    width: 16px;
}
</style>
<script>

layui.use(['form','common','selectTree'], function (form) {
    var addAlertHtml = $('#JS_hidden_box').html();
    $('#JS_hidden_box').remove();
    var dataList = {:json_encode($data)};
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    
    //获取所有页面数据
    var getData = function(){
        var lists = $('#JS_box tr');
        var returnData = new Array;
        $.each(lists,function(key,val){
             var li = {
                id   : $(this).data('id'),
                name : $(this).data('name'),
                depth: $(this).data('depth')?  $(this).data('depth') : 1,
             }
             returnData.push(li);
        });
        return returnData;
    }
    
    // 新增加分类
    $('#JS_addBtn').on('click',function(){       
        var dataList = getData();
        console.log(dataList);
        var pid = 0;
        var index = layer.open({
            title : '添加分类',
            type: 1,
            skin: 'layui-layer-adminshow', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: addAlertHtml
        });        
        var select = layui.selectTree.render({
            elem : '#JS_select', //绑定的容器元素
            data : dataList, //展示的数据 和 url 赋值其中一个 data 优先 没有的话从接口获取数据
            checkid : 7, // 数据选中的ID
            name : 'group', // 生成的表单名称
            done : function(val){
                console.log(val);
                pid = val.id;
            },
            field : {
                id      : 'id',     // 上传表单的值对应的字段
                name    : 'name',   // 显示的名称
                depth   : 'depth'   // 级别字段
            }        
        });
        // 关闭和保存 JS_add_save        
        $(document).delegate("#JS_add_save","click",function(){
            var val = $('#JS_alert_box').find('input[name="name"]').val();
            $.post('/set/casesgroup/add',{pid:pid,name:val},function(ret){
                if( ret.code == 1){
                    layui.layer.close(index); 
                }else{
                    layui.common.error(ret.msg);
                }
            },'json');
            
        });
        $(document).delegate("#JS_add_close","click",function(){
            layui.layer.close(index); 
        });        
    });
    
    
    // 点击处理事件    
    $(document).delegate("i.layui-icon","click",function(){
        var option = $(this).data('option');
        console.log(option);
    });
    
    
        //组装展示页面数据
        var getListHtml = function(data,depth){
            depth = depth ? depth : 1;
            var returnHtml = '';
            var maxdepth = depth; // 当前dd 或包含子集dd的最深类目
            $.each(data,function(key,val){
                var trMaxDepth = depth;
                var tempHtml = {html:'',depth:depth};
                var thisCss = {childicon:'<i class="JSe_block"></i>'};
                if( typeof val.child == 'object' && typeof val.child[0] != 'undefined' ){
                     tempHtml = getListHtml(val.child , depth + 1);
                     trMaxDepth = tempHtml.depth > trMaxDepth ? tempHtml.depth : trMaxDepth;
                     maxdepth = tempHtml.depth > maxdepth ? tempHtml.depth : maxdepth;
                     thisCss.childicon = '<i data-option="show" class="layui-icon layui-icon-triangle-d r e-pointer"></i>';
                }
                returnHtml += '<tr class="nodelist" data-maxdepth="'+trMaxDepth+'" data-id="'+val.id+'" data-depth="'+val.depth+'" data-name="'+val.groupname+'">'
                    +'<td class="td_left">'
                    +'    <div class="layui-table-cell ">'+val.id+'</div>'
                    +'</td>'                
                    +'<td class="td_left ">'
                    +'    <div style="padding-left: 10px;" class="layui-table-cell e-select-depth'+val.depth+'">'
                    + thisCss.childicon
                    +'        <span class="JS_edit">'+val.groupname+'</span>'
                    +'    </div>'
                    +'    <input style="display: none;" value="'+val.groupname+'" class="layui-input layui-table-edit JS_edit_input" />'
                    +'</td>'
                    +'<td class="td_left">'
                    +'    <div class="layui-table-cell ">'
                    +'        <i data-option="left" class="layui-icon layui-icon-left e-pointer"></i>'
                    +'        <i data-option="up" class="layui-icon layui-icon-up e-pointer"></i>'
                    +'        <i data-option="down" class="layui-icon layui-icon-down e-pointer"></i>  '                      
                    +'        <i data-option="right" class="layui-icon layui-icon-right e-pointer"></i> '                       
                    +'    </div>'
                    +'</td>'
                    +'<td class="td_left">'
                    +'    <div class="layui-table-cell layui-inline" style="height:auto;">'
                    +'        <input class="JS_status" '+( val.status ==1?"checked":"" )+' lay-filter="status" type="checkbox" data-id="'+val.id+'" lay-skin="switch" lay-text="正常|关闭">'
                    +'    </div>'
                    +'</td>'
                +'</tr>';
                returnHtml += tempHtml.html;
            });
            return {html:returnHtml,depth:maxdepth};
        }
        
    
    
    //初始化显示页面
    var showListHtml = function(){
        var result = getListHtml(dataList);
        var Elem = $(result.html);
        $('#JS_box').html(Elem);
        form.render();
    }
   // showListHtml();
    
    
    
    // 关闭事件
    var closeFunc = function(){
        var data = new Array();
        $.each( $('#JS_box tr'),function(k,val){
            if( $(this).find('.JS_status').attr("checked") ){
                var li = {
                    id : $(this).data('id'),
                    tagname: $(this).data('name'),
                    status : $(this).find('.JS_status').attr("checked")?1:2
                }
                data.push(li);
            }            
        });        
        if(typeof parent.window.tagsCall == 'function'){
            parent.window.tagsCall(data);
        }
        parent.layer.close(index);
    }
    
    $('#JS_close').on('click',function(){
        closeFunc();
    });
    
    // 保存
    $('#JS_save').on('click',function(){
        var data = new Array();
        $.each( $('#JS_box tr'),function(k,val){
            var li = {
                id : $(this).data('id'),
                tagname: $(this).data('name'),
                status : $(this).find('.JS_status').attr("checked")?1:2
            }
            data.push(li);
        });
        $.post('/set/tags/editall',{data:data},function(ret){
            if(ret.code==1){
                closeFunc();                
            }else{
                layui.common.error(ret.msg);
            }
        },'json');
    });
    
    
    
    // 移动操作
    var clickMove = function(e,type){
        var box = '#JS_box';
        var ThisID = e.data('id');
        var box_list = $(box + ' tr');
        var lenght = box_list.length;
        var checkMove = function(){
            var ret = true;
            $.each( box_list ,function(k,value){
                var tId = $(this).data('id');
                if( tId == ThisID ){
                    if( type == 'up' && k == 0 ){
                        ret = false;
                        return;
                    }
                    if( type == 'down' && lenght-1 == k ){
                        ret = false;
                        return ;
                    }
                }
            });
            return ret;
        }
        if (!checkMove()) return false;
        var temp = e.clone();
        if( type == 'up'){
            e.prev().before(temp);
        }else{
            e.next().after(temp);            
        }
        e.remove();
        $.each( $(box + ' tr') ,function(k,value){
            $(this).find('.layui-btn-group a').show();
            if( k == 0 ) $(this).find('.JS_up').hide();
            if( lenght -1  == k ) $(this).find('.JS_down').hide();
        });
        form.render(); //更新全部
    }
    $("#JS_box").delegate(".JS_up","click",function(){
        clickMove($(this).parents('tr'),'up');
    });
    $("#JS_box").delegate(".JS_down","click",function(){
        clickMove($(this).parents('tr'),'down');
    });
    
    // 编辑 
    $("#JS_box").delegate(".JS_edit","click",function(){        
        var v = $(this).parents('.td_left').find('input').val();
        $(this).parents('.td_left').find('input').show().focus().val('').val(v);
    });
    $("#JS_box").delegate(".JS_edit_input","blur",function(){
        $(this).hide();
        var v = $(this).val();
        $(this).parents('td').find('.layui-table-cell').text(v);
        $(this).parents('tr').data('name',v);
    });
    
    
});

</script> {/block}